<template>
	<view>
		<view class="auth" style="margin-top: 80rpx;">
			<uni-icons @click="onBack()" type="left" style="position: absolute;top: 66rpx;left: 20rpx; z-index: 999;"
				size="30"></uni-icons>
			<image src="../../../static/images/default/login_bg.png" mode="aspectFit"
				style="position: absolute;top: -100rpx;width: 105%;left: 0rpx;"></image>
			<view class="top" style="display: flex;align-items: center; position: relative;z-index: 999;">
				<view class="" style="margin: 15vw 0 0 0;  color: #909090; font-size:  6.93vw;color: black;">
					<text style=" display: block; " @tap="toAuth()">登录</text>
					<!-- style="margin: 15vw 0 0 0;  font-size: 6.93vw;font-weight: bold;" -->
				</view>
				<view @tap="register" class=""
					style="margin: 15vw 0 0 3vw; font-size: 6.93vw;font-weight: bold;color: black;">注册
				</view>
			</view>
			<view
				style="margin-left: 17vw;  width: 13.6vw;height: 1.8vw;margin-top: -2vw; background: #ff8833; border-radius: 2vw; "
				class="act-block">
			</view>
			<form style=" display: block; margin-top: 15vw;" @submit="formSubmit">
				<!-- 电话号码框 -->
				<view style="border-bottom: 0.5vw solid #D8D8D8;" class="auth-group radius-bock  wlian-grey-light">
					<input placeholder="请输入手机号" type="number" maxlength="11" confirm-type="next"
						placeholder-class="placeholder" name="mobile" v-model="mobile" @input="onKeyInput"></input>
				</view>
				<!-- 密码框 -->
				<view style="border-bottom: 0.5vw solid #D8D8D8;" class=" auth-group radius-bock  wlian-grey-light">
					<input type="text" :password="showPassword" placeholder="请输入密码" confirm-type="done" maxlength="16"
						placeholder-class="placeholder" name="password" @input="onKeyInput"></input>
					<text :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">
						<svg v-if="showPassword" style="width: 5.06vw;height: 3.46vw;" t="1719972667913" class="icon"
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7474"
							width="200" height="200">
							<path
								d="M1024 512a527.36 527.36 0 0 0-220.16-250.88l71.68-71.68a25.088 25.088 0 0 0-35.84-35.84l-81.92 81.92a576 576 0 0 0-261.12-61.44A547.328 547.328 0 0 0 5.12 512l-5.12 10.24 5.12 10.24A532.992 532.992 0 0 0 220.16 768L153.6 834.56a24.576 24.576 0 0 0 0 35.84 18.944 18.944 0 0 0 15.36 5.12 18.944 18.944 0 0 0 15.36-5.12l76.8-76.8a576 576 0 0 0 245.76 56.32h5.12a558.592 558.592 0 0 0 501.76-322.56l5.12-10.24z m-967.68 10.24a498.688 498.688 0 0 1 445.44-302.08 571.904 571.904 0 0 1 225.28 46.08l-107.52 107.52a177.152 177.152 0 0 0-102.4-35.84 170.496 170.496 0 0 0-168.96 168.96 190.464 190.464 0 0 0 35.84 102.4l-117.76 117.76a429.568 429.568 0 0 1-209.92-204.8z m578.56-10.24a124.416 124.416 0 0 1-122.88 122.88 102.4 102.4 0 0 1-66.56-20.48L614.4 445.44a112.64 112.64 0 0 1 20.48 66.56z m-240.64 0a124.416 124.416 0 0 1 122.88-122.88 102.4 102.4 0 0 1 66.56 20.48l-168.96 168.96a94.208 94.208 0 0 1-20.48-66.56z m122.88 291.84a506.88 506.88 0 0 1-215.04-46.08L409.6 650.24a177.152 177.152 0 0 0 102.4 35.84 170.496 170.496 0 0 0 168.96-168.96 190.464 190.464 0 0 0-35.84-102.4l117.76-117.76a515.584 515.584 0 0 1 204.8 225.28 501.76 501.76 0 0 1-450.56 281.6z"
								fill="#2c2c2c" p-id="7475"></path>
						</svg>
						<svg v-else style="width: 5.06vw;height: 3.46vw;" t="1719972637261" class="icon"
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7315"
							width="200" height="200">
							<path
								d="M512 849.92a563.2 563.2 0 0 1-506.88-317.44l-5.12-10.24 5.12-10.24a548.864 548.864 0 0 1 1013.76 0l5.12 10.24-5.12 10.24a558.592 558.592 0 0 1-501.76 322.56 5.12 5.12 0 0 0-5.12-5.12z m-455.68-327.68a512 512 0 0 0 465.92 281.6 516.608 516.608 0 0 0 455.68-286.72 504.32 504.32 0 0 0-921.6 5.12z"
								fill="#2c2c2c" p-id="7316"></path>
							<path
								d="M512 680.96a168.96 168.96 0 1 1 168.96-168.96 170.496 170.496 0 0 1-168.96 168.96z m0-291.84a122.88 122.88 0 1 0 122.88 122.88A124.416 124.416 0 0 0 512 389.12z"
								fill="#2c2c2c" p-id="7317"></path>
						</svg>

					</text>
				</view>
				<!-- 输入验证码框 -->
				<view
					style="position: relative; display: flex;align-items: center;  border-bottom: 0.5vw solid #D8D8D8;"
					class="auth-group radius-bock  wlian-grey-light">
					<input type="number" placeholder="请输入验证码" name="captcha" maxlength="6"
						placeholder-class="placeholder" v-model="currentFocus" @input="onKeyInput"></input>
					<button v-if="pd"
						style="background-color: white;border: none !important;font-size: 3.2vw; color: #ff8833;"
						@tap="toCaptcha">点击获取</button>
					<view style="position: absolute;right: 0;bottom: 3.2vw; font-size: 3.2vw; color: #ff8833;" v-else
						class="auth-again">
						<text v-if="countdown > 0" class="time" style="color: #ff8833;" >{{countdown}}秒</text>
						<text v-if="countdown == 0" @tap="resend" style="color: #ff8833;" >重新发送</text>
						<!-- <text v-if="countdown < 50">没有收到验证码？</text>	 -->
					</view>
				</view>
				<!-- <text  formType="submit" :disabled="submitDisabled">获取验证码</text> -->
				<view style="margin-top: 10vw;" class="auth-button flex flex-direction">
					<button formType="submit" :disabled="submitDisabled"
						style=" border-radius: 86.4vw;  background: linear-gradient(90deg, #ff8833 0%, #ff8833 100%);color: white;"
						class="cu-btn sl radius-bock">注 册</button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group style="margin-left: 6vw;" :class="checked == 1 ? 'shake-horizontal' : ''"
					class="auth-clause" @change="CheckboxChange">
					<checkbox style="border-radius: 50% !important;" class="text-right"
						:class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view class="text-right">
						登录即同意 <text style="color: #ff8833;"
							@tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">《隐私权政策》</text><text
							style="color: #ff8833;"
							@tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">《用户协议》</text>
					</view>
				</checkbox-group>
			</form>
		</view>

		<!-- #ifndef MP-WEIXIN -->
		<view class="auth-foot">
			<view class="third"
				style=" margin-bottom: 20.46vw; display: flex;flex-direction: column;align-items: center;">
				<text
					style="margin: 5vw 0; width: 24.26vw; height: 4.8vw;color: #9C9C9C;font-size:3.4vw;">第三方账号登录</text>
				<image style="width: 10.4vw;height: 10.4vw;" src="../../../static/images/user/weixin.png" mode="">
				</image>
			</view>
		</view>
		<!-- #endif -->

	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				pd: "true",
				countdown: 60,
				submitDisabled: true,
				title: '表单验证',
				pageroute: '',
				mobile: '',
				password: '',
				checked: 0,
				currentFocus: '',
				showPassword: true,
				// event: ''
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
		},
		methods: {
			
			onBack() {
				uni.navigateBack()
			},
			
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			inputCode(e) {
				// this.code[this.currentFocus - 1] = e;
				if (this.currentFocus.length == 6) {
					this.login();
				}

			},
			login() {
				uni.showLoading();
				// // 找回密码
				// if (this.event == 'resetpwd') {
				// 	this.$wanlshop.to(`resetpwd?mobile=${this.mobile}&captcha=${this.code.join("")}&url=${this.pageroute}`);
				// 	uni.hideLoading();
				// }
				// // 绑定手机号
				// if (this.event == 'binding') {

				// }
				// // 验证码登录
				// if (this.event == 'mobilelogin') {
				// 	this.$api.post({
				// 	    url: '/wanlshop/user/mobilelogin', 
				// 		data:{
				// 			mobile: this.mobile,
				// 			captcha: this.code.join(""),
				// 			client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
				// 		},
				// 	    success: res => {
				// 			uni.hideLoading();
				// 			// 中央控制总线
				// 			this.$store.dispatch('user/login', res);
				// 	        this.$store.dispatch('cart/login');
				// 	        uni.reLaunch({url: decodeURIComponent(this.pageroute)});
				// 	    }
				// 	});
				// }
				// 用户注册

				this.$api.post({
					url: '/wanlshop/user/register',
					data: {
						mobile: this.mobile,
						password: this.password,
						captcha: this.currentFocus,
						client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
							"wanlshop:chat_client_id") : null
					},
					success: res => {
						uni.hideLoading();
						// 中央控制总线
						this.$store.dispatch('user/login', res);
						this.$store.dispatch('cart/login');
						this.$store.dispatch('chat/get');
						uni.reLaunch({
							url: "/pages/user"
						});
					}
				});

				this.currentFocus = 0;
				this.code = [];
			},
			deleteCode() {
				this.currentFocus--;
				this.code.splice(-1, 1);
			},
			emptyCode() {
				this.code = [];
				this.currentFocus = 0;
			},
			hanldeOpenKeyboard() {
				this.keyboardVisible = true;
			},

			startTimer() {
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend() {
				this.startTimer();
				this.code = [];
				this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
			sendMessage() {
				this.$api.get({
					url: '/wanlshop/sms/send',
					data: {
						// event: this.event,
						event: 'register',
						mobile: this.mobile
					},
					loadingTip: '验证码发送中...',
					success: res => {
						this.$wanlshop.msg('验证码发送成功');
					}
				});
			},

			toAuth() {
				uni.redirectTo({
					url: "/pages/user/auth/name"
				})
			},

			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			onKeyInput: function(e) {
				this.submitDisabled = false
			},

			// 发送验证码
			toCaptcha() {
				this.$api.get({
					url: '/wanlshop/validate/check_mobile_available',
					data: {
						mobile: this.mobile,
						password: this.password
					},
					success: res => {
						this.sendMessage();
						this.startTimer();
						this.pd = false;
					},
					fail: res => {
						uni.showModal({
							title: '手机号已被注册',
							content: '点击确定使用手机号登录',
							success: (msg) => {
								if (msg.confirm) {
									this.$wanlshop.to(
										`name?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,
										'slide-in-bottom', 200);
								} else if (msg.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},


			formSubmit: function(e) {

				if (this.checked == 2) {
					console.log(this.mobile)
					//定义表单规则
					var rule = [{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确的手机号'
						},
						{
							name: 'password',
							checkType: 'string',
							checkRule: '6,16',
							errorMsg: '密码至少6位'
						},
						{
							name: 'captcha',
							checkType: 'string',
							checkRule: '6',
							errorMsg: '请输入6位的验证码'
						}
					];
					//进行表单检查
					var formData = e.detail.value;
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						this.login()
						this.$api.get({
							url: '/wanlshop/validate/check_mobile_available',
							data: {
								mobile: this.mobile,
								password: this.password
							},
							success: res => {
								this.sendMessage();
								this.startTimer();
								this.pd = false;
								// this.$wanlshop.to(`validcode?event=register&mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
							},
							fail: res => {
								uni.showModal({
									title: '手机号已被注册',
									content: '点击确定使用手机号登录',
									success: (msg) => {
										if (msg.confirm) {
											this.$wanlshop.to(
												`name?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,
												'slide-in-bottom', 200);
										} else if (msg.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						});
					} else {
						this.$wanlshop.msg(graceChecker.error);
					}
				} else {
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意隐私权政策和用户协议');
					}, 300)
				}
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import url("auth.css");

	uni-button:after {
		border: none !important;
	}

	wx-button:after {
		border: none !important;
	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input {
		border-radius: 50% !important;

	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input-checked {
		background-color: #ff8833 !important;
		border-color: #ff8833 !important;
	}

	wx-checkbox ::v-deep .wx-checkbox-input {
		border-radius: 50% !important;

	}

	wx-checkbox ::v-deep .wx-checkbox-input-checked {
		background-color: #ff8833 !important;
		border-color: #ff8833 !important;
	}
</style>